<template>
  <transition name="editor">
    <section v-show="visible" class="editor-pop-wrapper" @click="closeEditor">
      <div class="bg-content nb-shadow" @click.stop="stop">
        <div class="shade-right"></div>
        <div class="editor-main">
          <div class="title-pop">{{title}}</div>
          <div class="wang-editor-pop">
            <slot></slot>
          </div>
          <div class="footer-content">
            <nb-button type="plain" @click="backStep">{{cancel}}</nb-button>
            <nb-button type="primary" @click="nextStep">{{success}}</nb-button>
          </div>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  /**
   * type 标题
   * cancel 取消按钮文案
   * success 确认按钮文案
   * 点击取消会返回 back事件
   * 点击确认会返回 next事件
   * 本组件有show  hide 方法 来控制显示隐藏
   */
  export default {
    data () {
      return {
        visible: false
      }
    },
    props: {
      title: {
        type: String,
        default: '设置'
      },
      cancel: {
        type: String,
        default: '取消'
      },
      success: {
        type: String,
        default: '下一步'
      }
    },
    methods: {
      show () {
        this.visible = true
        this.$store.commit('UPDATE_DRAWER', true)
      },
      hide () {
        this.visible = false
        this.$store.commit('UPDATE_DRAWER', false)
      },
      nextStep () {
        this.$emit('next')
      },
      backStep () {
        this.$emit('back')
      },
      stop () {
      },
      closeEditor () {
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.editor-pop-wrapper{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1001;
  top: 0px;
  left: 185px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 185px;
  padding-top: 40px;
  .bg-content{
    background: #f3f3f4;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    z-index: 90290;
    .shade-right{
      position: absolute;
      right: 0;
      width: 20px;
      height: 100%;
      background:#f3f3f4;
      z-index: 99;
    }
    .editor-main{
      background: white;
      height: 100%;
      display: flex;
      flex-direction: column;
      .title-pop{
        padding: 12px 20px 15px;
        border-bottom: 1px solid #f3f3f4;
        font-size: 15px;
        margin-bottom: 20px;
      }
      .wang-editor-pop{
        flex: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
        overflow-y: scroll !important;
      }
      .footer-content{
        padding: 20px;
        border-top: 1px solid #f3f3f4;
        text-align: right;
      }
    }
  }
}
  .editor-enter,.editor-leave-to{
    transform: translate3d(100%, 0, 0)
  }
  .editor-enter-active,.editor-leave-active{
    transition: all 0.3s ease-in-out;
  }
  .w-e-toolbar{
    border: none !important;
    background: white !important;
  }
</style>
